<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
{#<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">#}
<input type="text" id="d1">
<input type="text" id="d2">
<input type="file" id="file_obj">
<button id="sub">发送ajax请求</button>

<script>
    $("#sub").click(function (){
        // 产生一个内置对象
        let fromDataObj = new FormData();
        // 对象添加普通类型的数据
        fromDataObj.append('name',$('#d1').val());
        fromDataObj.append('pwd',$('#d2').val());
        // 对象添加文件类型的数据
        fromDataObj.append('file',$('#file_obj')[0].file[0])
        // 发送ajax请求
        $.ajax({
            url:"/app01/ab_ajax/",
            type:"post", // 默认get
            data:fromDataObj, // 直接填写FormData对象 不需要构造字典
            processData:false, // 针对数据不做任何处理 直接发对象
            contentType:false, // 不采用任何编码 django后端可识别对象
            success:function (args){
                alert(args)
            }
        })
    })

    {#$('#d2').blur(function (){#}
    {#    let i1Val = $('#d1').val();#}
    {#    let i2Val = $(this).val();#}
    {#    // 发送ajax请求#}
    {#    $.ajax({#}
    {#        url:'', // 填写后端接受地址 不填则当前页面提交数据#}
    {#        type:'post', // 控制数据提交的请求方式#}
    {#        data:JSON.stringify({'i1':i1Val, 'i2':i2Val}), // 提交给后端的数据#}
    {#        contentType:'application/json',#}
    {#        success:function (args){#}
    {#            // 异步回调函数(后端有数据返回的时候自动触发该函数的运行 args用于接受后端返回的数据)#}
    {#            $('#d3').val(args)#}
    {#        }#}
    {#    })#}
    // })
</script>
</body>
</html>

